import React, { useEffect, useState } from 'react'
import './MyDetail.scss'
import { useLocation, useHistory } from 'react-router-dom'
import { useObserver } from 'mobx-react-lite'
import useStore from '../context/useStore'
import { detailFace } from '../utils/interface'
import QueryString from "../hooks/useQueryString"
const MyDetail: React.FC = () => {
    let location = useLocation()
    let history = useHistory()
    let [list, setList] = useState<Object>({})
    let [text, setText] = useState<string>('')
    let { myDetail } = useStore()

    let id = QueryString(history.location.search).id

    // 返回上一页
    function back() {
        history.goBack()
    }
    useEffect(() => {
        setList(location.state)
    }, [location])

    useEffect(() => {
        myDetail.myDetail(id)
    }, [location, myDetail,id])

    useEffect(() => {
        myDetail.everyList(id)
    }, [location, myDetail,id])

    function changText(e: React.ChangeEvent<HTMLSelectElement>) {
        setText(e.target.value)
    }
    return useObserver(() => (
        <div className="mydetail">
            <div className="heads">
                <span onClick={back}><svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1864" width="20" height="20"><path d="M294.13376 512c0-13.70112 5.23264-27.40224 15.6672-37.84704l328.704-328.69376c20.91008-20.91008 54.80448-20.91008 75.70432 0 20.89984 20.89984 20.89984 54.79424 0 75.70432L423.36256 512l290.83648 290.83648c20.89984 20.89984 20.89984 54.80448 0 75.70432-20.89984 20.91008-54.79424 20.91008-75.70432 0l-328.704-328.69376C299.35616 539.40224 294.13376 525.70112 294.13376 512z" p-id="1865"></path></svg></span>
                <h3>{(list as detailFace).name}</h3>
            </div>
            <div className="guojia">
                {
                    myDetail.rankdrop.map((item, index) => {
                        return <select value={text || item.name} key={index} onChange={changText} data-item={JSON.stringify(item)}>
                            {
                                item.data.map((i, n) => {
                                    return <option value={i.name} key={n} >
                                        {i.name}
                                    </option>
                                })
                            }
                        </select>
                    })
                }
            </div>
            <div className="mydetail_con">
                <div className="mdc_left">
                    <div className="pm">
                        <div className="pm_tit">
                            <span>排名</span>
                            <span>名称</span>
                        </div>
                        <div className="sssp">
                            {
                                myDetail.rankDataLis.map((item, index) => {
                                    return <div key={index} className="rsl">
                                        <div className="mdc_lefy_con">
                                            <span>{index + 1}</span>
                                            <span>
                                                {item[0].image && <img src={item[0].image} alt="" />}
                                                {item[0].name}
                                            </span>
                                        </div>
                                    </div>
                                })
                            }
                        </div>
                    </div>
                </div>
                <div className="mdc_right">
                    <div className="every">
                        <div className="hhhd">
                            {
                                myDetail.rankDropList.map((item) => {
                                    return item.list.map((items, index) => {
                                        return <span key={index}>{items.name}</span>
                                    })
                                })
                            }
                        </div>
                        <div>
                            {
                                myDetail.rankDataLis.map((item: { score: string }[], index) => {
                                    return <div key={index} className="hhhcon">
                                        {
                                            item.map((i, num) => {
                                                if (num !== 0) {
                                                    return <span key={num}>
                                                        {i.score}
                                                    </span>
                                                } else {
                                                    return ''
                                                }
                                            })
                                        }
                                    </div>
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    ))
}
export default MyDetail
